<template>
  <view class="home">
    <!-- 轮播图 -->
    <carousel></carousel>
    
    <!-- 导航 -->
    <view class="nav-grid">
      <view class="nav-item" @click="scrollToSection('news')">
        <uni-icons type="spinner-cycle" size="30" color="#ff6600"></uni-icons>
        <text class="nav-text">景区动态</text>
      </view>
      <view class="nav-item" @click="scrollToSection('reservation')">
        <uni-icons type="flag" size="30" color="#ff6600"></uni-icons>
        <text class="nav-text">景点预约</text>
      </view>
      <view class="nav-item nav-item-center" @click="scrollToSection('popularity')">
        <uni-icons type="star" size="30" color="#ff6600"></uni-icons>
        <text class="nav-text">人气榜单</text>
      </view>
      <view class="nav-item" @click="scrollToSection('food')">
        <uni-icons type="heart" size="30" color="#ff6600"></uni-icons>
        <text class="nav-text">美食</text>
      </view>
      <view class="nav-item" @click="scrollToSection('specialty')">
        <uni-icons type="gift" size="30" color="#ff6600"></uni-icons>
        <text class="nav-text">特产</text>
      </view>
    </view>

    <!-- 景区动态 -->
    <view class="news-section section" id="news" :class="{ 'section-highlight': highlightSection === 'news' }">
      <view class="section-title">景区动态
        <view class="more-btn" @click.stop="goToNews">
          <text>更多</text>
          <uni-icons type="right" size="14" color="#666"></uni-icons>
        </view>
      </view>
      <view class="news-list">
        <view v-for="news in newsList" 
              :key="news.id" 
              class="news-item"
              @tap="showNewsDetail(news)">
          <uni-icons :type="news.icon" size="20" color="#ff6600"></uni-icons>
          <text class="news-title">{{ news.title }}</text>
          <text class="news-time">{{ news.time }}</text>
        </view>
      </view>
    </view>

    <!-- 景点预约 -->
    <view class="reservation-section section" id="reservation" :class="{ 'section-highlight': highlightSection === 'reservation' }">
      <button @click="goToReservation" class="reservation-btn">
        <uni-icons type="calendar" size="20" color="#fff"></uni-icons>
        <text class="btn-text">预约景点</text>
      </button>
    </view>

    <!-- 游玩指南 -->
    <view class="guide-section section">
      <view class="section-title">游玩指南</view>
      <view class="card-container">
        <view @click="goToAttractions('景区概况')" class="card yellow-bg">
          <view class="card-title">景区概况</view>
          <text class="small-text">了解景区的基本信息，包括历史、文化、特色等。</text>
        </view>
        <view @click="goToDetails('官方攻略')" class="card green-bg">
          <view class="card-title">官方攻略</view>
          <text class="small-text">获取官方推荐的游玩攻略、注意事项等。</text>
        </view>
        <view @click="goToParking('停车预约')" class="card orange-bg">
          <view class="card-title">停车预约</view>
          <text class="small-text">提前预约停车位，避免高峰期没有车位。</text>
        </view>
      </view>
    </view>

    <!-- 美食推荐 -->
    <view class="food-section section" id="food" :class="{ 'section-highlight': highlightSection === 'food' }">
      <view class="section-title">
        美食推荐
        <view class="more-btn" @click.stop="goToFood">
          <text>更多</text>
          <uni-icons type="right" size="14" color="#666"></uni-icons>
        </view>
      </view>
      <!-- 美食容 -->
    </view>

    <!-- 特产推荐 -->
    <view class="specialty-section section" id="specialty" :class="{ 'section-highlight': highlightSection === 'specialty' }">
      <view class="section-title">
        特产推荐
        <view class="more-btn" @click.stop="goToSpecialty">
          <text>更多</text>
          <uni-icons type="right" size="14" color="#666"></uni-icons>
        </view>
      </view>
      <!-- 特产内容 -->
    </view>

    <!-- 人气榜 -->
    <view class="popularity-section section" id="popularity" :class="{ 'section-highlight': highlightSection === 'popularity' }">
      <view class="section-title">
        人气榜单
        <view class="more-btn" @click.stop="goToPopularity">
          <text>更多</text>
          <uni-icons type="right" size="14" color="#666"></uni-icons>
        </view>
      </view>
      <view class="popularity-list">
        <view class="popularity-item" @click="goToPopularityDetail('spots')">
          <text class="popularity-link">景点人气榜</text>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
        <view class="popularity-item" @click="goToPopularityDetail('guides')">
          <text class="popularity-link">攻略人气榜</text>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Carousel from '@/components/common/Carousel.vue'

export default {
  components: {
    Carousel
  },
  data() {
    return {
      newsList: [
        {
          id: 1,
          title: '景区活动1',
          time: '2024-01-20',
          icon: 'notification'
        },
        {
          id: 2,
          title: '景区活动2',
          time: '2024-01-19',
          icon: 'notification'
        }
      ],
      currentTime: '',
      highlightSection: ''
    }
  },
  mounted() {
    this.updateTime()
    setInterval(this.updateTime, 1000)
  },
  methods: {
    scrollToSection(id) {
      const query = uni.createSelectorQuery()
      query.select('#' + id).boundingClientRect()
      query.selectViewport().scrollOffset()
      query.exec((res) => {
        if (res[0] && res[1]) {
          const targetTop = res[0].top + res[1].scrollTop - 20
          uni.pageScrollTo({
            scrollTop: targetTop,
            duration: 300,
            complete: () => {
              this.highlightSection = id;
              setTimeout(() => {
                this.highlightSection = '';
              }, 1500);
            }
          })
        }
      })
    },
    goToReservation() {
      uni.navigateTo({
        url: '/pages/reservation/reservation'
      })
    },
    updateTime() {
      const now = new Date()
      this.currentTime = now.toLocaleString()
    },

    goToFood() {
      uni.navigateTo({
        url: '/pages/food/food'
      })
    },
    goToNews() {
      uni.navigateTo({
        url: '/pages/news/news'
      })
    },
    goToSpecialty() {
      uni.navigateTo({
        url: '/pages/specialty/specialty'
      })
    },
    goToPopularity() {
      uni.navigateTo({
        url: '/pages/popularity/popularity'
      })
    },
    goToPopularityDetail(type) {
      uni.navigateTo({
        url: `/pages/popularity/popularity?type=${type}`
      })
    },
    goToParking() {
      uni.navigateTo({
        url: '/pages/parking/parking'
      })
    },
    goToAttractions() {
      uni.switchTab({
        url: '/pages/Attractions/Attractions'
      })
    },
    showNewsDetail(news) {
      uni.navigateTo({
        url: `/pages/news/detail?id=${news.id}`
      });
    },
    formatTime(dateString) {
      // 将日期字符串中的空格替换为'T'，确保iOS兼容
      const formattedDateString = dateString.replace(' ', 'T');
      const date = new Date(formattedDateString);
      
      // 检查日期是否有效
      if (isNaN(date.getTime())) {
        console.error('Invalid date:', dateString);
        return '';
      }
      
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },
  }
}
</script>
<style scoped>
.home {
  padding: 20px;
}

/* 导航样式 */
.nav-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr) 0 repeat(2, 1fr);  /* 中间留空给菱形 */
  gap: 15px;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin: 20px 0;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}

.nav-item:nth-child(1) {
  background: linear-gradient(135deg, #ffecd2, #fcb69f);  /* 柔和的橙色 */
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-item:nth-child(2) {
  background: linear-gradient(135deg, #e0f4ff, #95c6ff);  /* 淡雅的蓝色 */
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-item:nth-child(3) {
  background: linear-gradient(135deg, #e0ffe0, #98e698);  /* 清新的色 */
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-item:nth-child(4) {
  background: linear-gradient(135deg, #ffe0e0, #ffb3b3);  /* 温柔的粉色 */
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-item:nth-child(5) {
  background: linear-gradient(135deg, #ffe4b5, #ffc87c);  /* 更柔和的金黄色渐变 */
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-item uni-icons {
  color: #333 !important;  /* 深色图标 */
}

.nav-text {
  margin-top: 12px;
  font-size: 14px;
  color: #333;  /* 深色文字 */
  font-weight: 500;
}

.nav-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.nav-item:active {
  transform: scale(0.95);
  opacity: 0.9;
}

.nav-item-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff8f6;
  border: 2px solid #ffe4e1;
  z-index: 1;
  box-shadow: 0 2px 12px rgba(255, 102, 0, 0.1);
  transition: all 0.3s ease;
  width: 65px;
  height: 65px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
}

.nav-item-center:hover {
  transform: translate(-50%, -50%) scale(1.05);
}

.nav-item-center uni-icons,
.nav-item-center .nav-text {
  color: #ff6600;
  text-align: center;
  width: 100%;
}

.nav-item-center .nav-text {
  margin-top: 2px;
  font-size: 12px;
}

/* 统一标题样式 */
.section-title {
  position: relative;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 30px 0;
  padding-left: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 使用伪元素统一竖线样式 */
.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: #ff6600;
  border-radius: 2px;
}

/* 移除原有的border-left */
.section-title {
  border-left: none;
}

.more-btn {
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 15px;
  background: #f5f5f5;
  transition: all 0.3s ease;
  cursor: pointer;
}

.more-btn text {
  margin-right: 4px;
}

.more-btn:hover {
  background: #f0f0f0;
  transform: translateX(2px);
}

.more-btn:active {
  transform: scale(0.95);
}

/* 新闻列表样式 */
.news-list {
  list-style: none;
  padding: 0;
}

.news-item {
  display: flex;
  align-items: center;
  padding: 15px;
  margin-bottom: 10px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.news-title {
  flex: 1;
  margin-left: 10px;
}

.news-time {
  color: #999;
  font-size: 14px;
}

/* 预约按钮样式 */
.reservation-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px;
  margin: 20px 0;
  font-size: 18px;
  color: white;
  background: linear-gradient(135deg, #ff6600, #ff9966);
  border: none;
  border-radius: 25px;
  box-shadow: 0 4px 15px rgba(255, 102, 0, 0.2);
}

.btn-text {
  margin-left: 8px;
}

/* 卡片样式 */
.card-container {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 25px;
  width: 30%;
  text-align: left;
}

.yellow-bg {
  background-color: #ffcc00;
}

.green-bg {
  background-color: #4caf50;
}

.orange-bg {
  background-color: #ff5722;
}

.card-title {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 10px;
}

.small-text {
  font-size: 12px;
  color: #eeeeee;
}

/* 人气榜样式 */
.popularity-list {
  list-style: none;
  padding: 0;
}

.popularity-item {
  padding: 15px;
  margin-bottom: 10px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}

.popularity-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.popularity-link {
  color: #333;
  font-size: 16px;
}

/* 内容部分 */
.section {
  position: relative;
  margin-bottom: 15px;  /* 设置一个基础间距 */
}

/* 针对不同内容类型的section特殊处理 */
.news-section {
  margin-bottom: 25px;  /* 新闻区块需要更多空间 */
  display: flex;
  flex-direction: column;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 10px;  /* 设置新闻项之间的间距 */
  width: 100%;
  padding: 10px 0;  /* 添加内边距 */
}

.section-highlight {
  background: rgba(255, 102, 0, 0.05);
  border-radius: 20px;
  padding: 15px;
  transform: scale(1.02);
  box-shadow: 0 2px 12px rgba(255, 102, 0, 0.1);
  z-index: 1;
  transform-origin: center;
}

.guide-section {
  margin-bottom: 30px;  /* 游玩指南包含大卡片，需要更多空间 */
}

.popularity-section {
  margin-bottom: 20px;  /* 人气榜单适中间距 */
}

.reservation-section {
  margin: 15px 0;  /* 预约按钮区域紧凑一些 */
  padding: 0 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .section-title {
    font-size: 20px;
  }

  .nav-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .card-container {
    flex-direction: column;
    align-items: center;
  }

  .card {
    width: 90%;
    margin: 10px auto;
  }
}

/* 高亮动画样式 */
@keyframes highlightAnimation {
  0% {
    background-color: transparent;
    border-radius: 12px;
  }
  50% {
    background-color: rgba(255, 102, 0, 0.1);
    border-radius: 12px;
  }
  100% {
    background-color: transparent;
    border-radius: 12px;
  }
}

.section.section-highlight {
  animation: highlightAnimation 1.5s ease-in-out !important;
  border-radius: 12px !important;
}

/* 默认状态 */
.section {
  transform: scale(1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  /* 平滑的还原过程 */
  transform-origin: center;  /* 从中心点开始变换 */
}
</style>
